Skip to main content

next js之目录结构说明

· 3 min read
wenhao

本页面提供 Next.js 项目的文件和文件夹结构概述。它涵盖了顶层文件和文件夹、配置文件以及应用程序和页面目录中的路由约定。

顶层文件夹

文件夹名说明
app应用程序路由
pages页面路由
public静态资源文件夹
src可选的应用程序源代码文件夹

顶层文件

文件名说明
Next.jsNext.js 运行时文件
next.config.jsNext.js 的配置文件
package.json项目依赖和脚本
instrumentation.tsOpenTelemetry 和 Instrumentation 文件
middleware.tsNext.js 请求中间件
.env环境变量
.env.local本地环境变量
.env.production生产环境变量
.env.development开发环境变量
.eslintrc.jsonESLint 的配置文件
.gitignoreGit 忽略的文件和文件夹
next-env.d.tsNext.js 的 TypeScript 声明文件
tsconfig.jsonTypeScript 的配置文件
jsconfig.jsonJavaScript 的配置文件

app 路由约定

路由文件

文件名扩展名说明
layout.js .jsx .tsx布局
page.js .jsx .tsx页面
loading.js .jsx .tsx加载界面
not-found.js .jsx .tsx未找到界面
error.js .jsx .tsx错误界面
global-error.js .jsx .tsx全局错误界面
route.js .tsAPI 端点
template.js .jsx .tsx重新渲染的布局
default.js .jsx .tsx并行路由回退页面

嵌套路由

  • 使用文件夹表示路由片段

动态路由

  • [folder] 表示动态路由片段
  • [...folder] 表示匹配所有路由片段
  • [[...folder]] 表示可选匹配所有路由片段

路由组和私有文件夹

  • (folder) 表示路由组,不影响路由
  • _folder 表示私有文件夹,不参与路由

并行和拦截路由

  • @folder 表示命名插槽
  • (.)folder 表示拦截同级路由
  • (..)folder 表示拦截上一级路由
  • (..)(..)folder 表示拦截上两级路由
  • (...)folder 表示从根目录拦截

元数据文件约定

App 图标

  • favicon.ico 表示网站图标文件
  • icon.ico .jpg .jpeg .png .svg 表示应用程序图标文件
  • icon.js .ts .tsx 表示生成的应用程序图标文件
  • apple-icon.jpg .jpeg .png 表示苹果应用程序图标文件
  • apple-icon.js .ts .tsx 表示生成的苹果应用程序图标文件

Open Graph 和 Twitter 图像

  • opengraph-image.jpg .jpeg .png .gif 表示 Open Graph 图像文件
  • opengraph-image.js .ts .tsx 表示生成的 Open Graph 图像文件
  • twitter-image.jpg .jpeg .png .gif 表示 Twitter 图像文件
  • twitter-image.js .ts .tsx 表示生成的 Twitter 图像文件

SEO

  • sitemap.xml 表示网站地图文件
  • sitemap.js .ts 表示生成的网站地图文件
  • robots.txt 表示 Robots 文件
  • robots.js .ts 表示生成的 Robots 文件

pages 路由约定

特殊文件

  • _app.js .jsx .tsx 表示自定义 App
  • _document.js .jsx .tsx 表示自定义 Document
  • _error.js .jsx .tsx 表示自定义错误页面
  • 404.js .jsx .tsx 表示404错误页面
  • 500.js .jsx .tsx 表示500错误页面

路由

  • 使用文件夹和文件的命名约定来表示路由

以上是 Next.js 项目结构的概述。

Loading Comments...